<template>
	<view style="position: relative;height:100vh">
		<u-navbar title='账号设置' left-icon-color="white" :autoBack="true" :titleStyle="{color:'white'}"
			bgColor="transparent"></u-navbar>
		<image class="bgImage"
			src="https://renovationcdn.jiachuangnet.com/mine/mineHeader.jpg">
		</image>
		<view class="content" style="">
			<view class="flex alignItem bewteen borderBottom paddingTopBottom20">
				<view class="label">头像：</view>
				<view>
					<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="1"></u-upload> -->
						<upload :name="1" :fileListInit="[avatar]" @uploadFile="uploadFile" :maxCount="1"></upload>
				</view>

			</view>
			<view class="flex alignItem bewteen borderBottom paddingTopBottom20">
				<view class="label">昵称：</view>
				<view class="val">
					<u--input v-model="nickName" inputAlign='right' :placeholder='nickNameOld'></u--input>
				</view>
			</view>
			<view class="flex alignItem bewteen  paddingTopBottom20">
				<view class="label">手机：</view>
				<view class="val">
					<u--input v-model="phoneNum" inputAlign='right' :placeholder='phoneNumOld'></u--input>
				</view>
			</view>
		</view>
		<view style="width:700rpx;position: absolute;bottom:100rpx;left: 25rpx;">
			<u-button type="primary" shape="circle" @click="userInfoUpdate">保存</u-button>
		</view>
	</view>
</template>
<script>
	import upload from '@/components/upload/upload.vue'
	export default {
		data() {
			return {
				load:0,
				mobile: '',
				avatar:'',
				nickName:'',
				phoneNum:'',
				nickNameOld:'',
				phoneNumOld:'',
				userId:'',
				load:0
			}
		},
		components:{
			upload
		},
		onLoad() {
			// 获取用户昵称,头像
			console.log(uni.getStorageSync('avatar'))
			this.nickNameOld= uni.getStorageSync('nickName')
			this.phoneNumOld= uni.getStorageSync('phoneNum')
			this.avatar= uni.getStorageSync('avatar')?uni.getStorageSync('avatar'):''
			this.userId=uni.getStorageSync('userId')
		},
		methods: {
		     uploadFile(msg){
				 console.log(msg)
				 this.avatar = msg.files[0]||''
			 },
			 userInfoUpdate(){
				 if(this.load==1){
				 	return uni.showLoading({
				 		title: '请勿重复提交 :)'
				 	});
				 }
				 this.load=1
				 uni.$u.http.post('/user/updateAccountSetting',{
					 userId:this.userId,
					 avatar:this.avatar,
					 nickName:this.nickName.length!=0?this.nickName:this.nickNameOld,
					 phoneNum:this.phoneNum.length!=0?this.phoneNum :this.phoneNumOld,
				 }).then(res=>{
					 if(res){
						 uni.showToast({
						 	title: '账号设置成功',
						 	duration: 2000
						 })
						 uni.switchTab({
						 	url: '/pages/mine/index'
						 });
					 }
					 this.load=0
				 })
			 }
		},
		
	}
</script>
<style lang="scss" scoped>
	.list>view {
		padding: 20rpx;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.content {
		width: 660rpx;
		min-height: 160rpx;
		position: absolute;
		top: 240rpx;
		left: 25rpx;
		background-color: white;
		padding: 20rpx;
		padding-top: 0;
		border-radius: 10rpx;
	}

	.bgImage {
		width: 750rpx;
		height: 410rpx;
	 
	}
</style>